<script>
import SubTotal from "./SubTotal.vue";
export default {
  name: "购物车项",
  props: {
    ordinal: Number,
    name: String,
    price: Number,
    amount: Number,
  },
  components: {
    SubTotal
  },
};
</script>

<template>
  <div class="cart-item">
    <span class="ordinal">{{ ordinal }}</span>
    <span class="name">{{ name }}</span>
    <span class="price">{{ price.toFixed(2) }}元</span>
    <span class="amount">{{ amount }}</span>
    <SubTotal :price="price" :amount="amount"></SubTotal>
  </div>
</template>

<style>
.cart-item {
  display: flex;
  border: 1px solid #dfdfdf;
  margin: 10px;
}

.cart-item > .ordinal {
  flex-basis: 10%;
  text-align: center;
}

.cart-item > .name {
  flex-basis: 40%;
}

.cart-item > .price {
  flex-basis: 10%;
  text-align: center;
}

.cart-item > .amount {
  flex-basis: 25%;
  text-align: center;
}
</style>
